<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>现代浏览器博物馆</title>
	<link rel="shortcut icon" href="img/favicon.ico">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/博物馆.css">
</head>

<body>
	<nav id="nav" class="navbar navbar-default">
		<div class="container container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
					data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">现代浏览器博物馆</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="#">综述<span class="sr-only">(current)</span></a></li>
					<li><a href="#">简述</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
							aria-expanded="false">特点<span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#Chrome">Chrome</a></li>
							<li><a href="#Firefox">Firefox</a></li>
							<li><a href="#Opera">Opera</a></li>
							<li><a href="#Safari">Safari</a></li>
						</ul>
					</li>
					<li><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">关于</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container">
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">"关于"的标题</h4>
					</div>
					<div class="modal-body">
						"关于"的内容
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			<li data-target="#carousel-example-generic" data-slide-to="1"></li>
			<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			<li data-target="#carousel-example-generic" data-slide-to="3"></li>
		</ol>
		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<img src="img/chrome-big.jpg" alt="谷歌浏览器">
				<div class="carousel-caption">
					<h1>Chrome</h1>
					<p>谷歌浏览器</p>
					<a href="#" class="btn btn-primary btn_a">点击下载</a>
				</div>
			</div>
			<div class="item">
				<img src="img/firefox-big.jpg" alt="火狐浏览器">
				<div class="carousel-caption">
					<h1>Firefox</h1>
					<p>火狐浏览器</p>
					<a href="#" class="btn btn-primary btn_a">点击下载</a>
				</div>
			</div>
			<div class="item">
				<img src="img/opera-big.jpg" alt="欧朋浏览器">
				<div class="carousel-caption">
					<h1>Opera</h1>
					<p>欧朋浏览器</p>
					<a href="#" class="btn btn-primary btn_a">点击下载</a>
				</div>
			</div>
			<div class="item">
				<img src="img/safari-big.jpg" alt="苹果浏览器">
				<div class="carousel-caption">
					<h1>Safari</h1>
					<p>苹果浏览器</p>
					<a href="#" class="btn btn-primary btn_a">点击下载</a>
				</div>
			</div>
		</div>
		<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-4 text-center">
				<img class="img-circle" src="img/chrome-logo-small.jpg" alt="...">
				<h2>Chrome</h2>
				<p>Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求。</p>
				<a href="#" class="btn btn-default" role="button">点击下载</a>
			</div>
			<div class="col-md-4 text-center">
				<img class="img-circle" src="img/firefox-logo-small.jpg" alt="...">
				<h2>Firefox</h2>
				<p>Mozilla Firefox，中文俗称“火狐”，是一个由Mozilla开发的自由及开放源代码的网页浏览器。</p>
				<a href="#" class="btn btn-default" role="button">点击下载</a>
			</div>
			<div class="col-md-4 text-center">
				<img class="img-circle" src="img/safari-logo-small.jpg" alt="...">
				<h2>Safari</h2>
				<p>Safari是苹果产品各类系统中的浏览器，Safari 是一款浏览器、一个平台，也是对锐意创新的公开邀请。</p>
				<a href="#" class="btn btn-default" role="button">点击下载</a>
			</div>
		</div>
		<hr>
	</div>
	<div class="container">
		<div role="tabpanel">
			<ul class="nav nav-tabs" role="tablist" id="tab-list">
				<li role="presentation" class="active"><a href="#Chrome" aria-controls="Chrome" role="tab"
						data-toggle="tab" aria-expanded="true">Chrome</a></li>
				<li role="presentation" class=""><a href="#Firefox" aria-controls="Firefox" role="tab" data-toggle="tab"
						aria-expanded="false">Firefox</a></li>
				<li role="presentation" class=""><a href="#Opera" aria-controls="Opera" role="tab" data-toggle="tab"
						aria-expanded="false">Opera</a></li>
				<li role="presentation" class=""><a href="#Safari" aria-controls="Safari" role="tab" data-toggle="tab"
						aria-expanded="false">Safari</a></li>
			</ul>
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active" id="Chrome">
					<div class="row feature media">
						<div class="media-body media-middle">
							<h2 class=""><i>Google Chrome</i>最受欢迎的浏览器</h2>
							<p class="p_body">Google Chrome,又称Google浏览器，是一个由Google (谷歌)
								公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit, 目标是提升稳定性、
								速度和安全性,并创造出简单且有效率的使用者界面</p>
						</div>
						<div class="media-left">
							<img src="img/chrome-logo.jpg">
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="Firefox">
					<div class="row feature media">
						<div class="media-body media-middle">
							<h2 class=""><i>Mozilla Firefox</i>开放源代码的浏览器</h2>
							<p class="p_body">Mozilla Firefox，中文俗称“火狐”（正式缩写为Fx或fx [1]
								），是一个由Mozilla开发的自由及开放源代码的网页浏览器。其使用Gecko排版引擎，支持多种操作系统，如Windows、macOS及GNU/Linux等。由于该浏览器开放了源代码，因此还有一些第三方编译版供使用，如pcxFirefox、苍月浏览器、tete009等。
							</p>
						</div>
						<div class="media-left">
							<img src="img/firefox-logo.jpg">
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="Opera">
					<div class="row feature media">
						<div class="media-body media-middle">
							<h2 class=""><i>Opera</i>全球第一手机浏览器</h2>
							<p class="p_body">
								欧朋（Opera）浏览器是全球第一手机浏览器Opera的中文品牌产品，体积轻小而功能强大，以简洁的界面设计和贴近中国用户的社会化应用为主要特色。欧朋浏览器推出免流量版上网，除了看视频和下载软件外都将免流量。欧朋手机浏览器结合了强大的内核和领先的云端转码技术，使手机访问网站速度提升5到10倍，流量节省最高达92%。
							</p>
						</div>
						<div class="media-left">
							<img src="img/opera-logo.jpg">
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="Safari">
					<div class="row feature media">
						<div class="media-body media-middle">
							<h2 class=""><i>Safari</i>苹果公司研发的网络浏览器</h2>
							<p class="p_body">Safari是苹果产品各类系统（如 macOS、iOS、iPadOS等）中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。Safari
								是一款浏览器、一个平台，也是对锐意创新的公开邀请。无论在 Mac、iPhone、iPad 或 iPod touch 上运行，Safari
								都可提供极致愉悦的网络体验方式，更不断地改写浏览器的定义。</p>
						</div>
						<div class="media-left">
							<img src="img/safari-logo.jpg">
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<p class="pull-right"><a href="#top" class="back">回到顶部</a></p>
		</footer>
	</div>
	<script src="bootstrap/js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script>
		$('.dropdown-menu li a').click(function () {
			var href = $(this).attr("href");
			$("#tab-list li a[href='" + href + "']").tab("show");
		})
	</script>
</body>

</html>